<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员列表</title>
    <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="../../css/public.css" media="all" rel="stylesheet">
    <link href="../../css/diy/form1.css" rel="stylesheet">
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <script src="../../frontstatic/js/notify.js"></script>
    <script src="../../frontstatic/js/notify_stand.js"></script>
    <style>
        #memberTableDiv {
            background-color: #FFFFFF;
            height: 500px;
            position: relative;
            top: 80px;
            border-radius: 15px;
        }
    </style>
</head>
<body>
<div style="background-color: #FFFFFF;height: 200px;border-radius: 15px">
    <div style="padding-left: 40px;padding-top:15px">
        <img height="25" loading="lazy" src="../../images/shouzuo.png" width="25">
        <span>按条件进行检索</span>
    </div>
    <hr>
    <div class="layui-form" style="padding-left: 50px;padding-top: 30px">
        <div class="layui-inline">
            <label class="layui-form-label">用户名称：</label>
            <div class="layui-input-inline">
                <input autocomplete="off" class="layui-input" id="memberName" placeholder="请输入" type="text">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">用户性别：</label>
            <div class="layui-input-inline">
             <select id="memberSex">
                 <option></option>
                 <option value="0">男</option>
                 <option value="1">女</option>
             </select>
            </div>
        </div>
        <div class="layui-form-item" id="selectBtn">
            <div class="layui-input-block">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-normal" id="selectwhereMemberBtn" type="button">查询
            </button>
                <button class="layui-btn layui-btn-primary  layui-btn-sm" type="reset">重置</button>
            </div>
        </div>
    </div>
    <div id="memberTableDiv">
        <div style="width: 1500px">
            <table class="layui-table" id="memberallTable" lay-filter="memberallTablemode"></table>
        </div>
    </div>
</div>
</body>
<script id="status" type="text/html">
    {{# if(d.statics === 1){ }}
    <span>正常</span>
    {{# } else { }}
    <span>禁用</span>
    {{# } }}
</script>
<script id="memberbutton" type="text/html">
    {{# if(d.statics === 1){ }}
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">禁用</button>
    {{# } else { }}
    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="start">启用</button>
    {{# } }}
</script>
<script>
    var notify;
    layui.use(['notify'],function(){
        notify=layui.notify;
    })
    layui.use('table', function () {
        var table = layui.table;
       var tableIndex =table.render({
            elem: '#memberallTable'
            , method: 'post'
            , title: '会员数据表'
            , size: 'lg'
            , url: '/users/page' //数据接口
            , contentType: "application/json"
            , page: {theme:'#1E9FFF'} //开启分页
            , limit: 10
            , even: true
           ,parseData: function(res){ //res 即为原始返回的数据
               return {
                   "code": res.code, //解析接口状态
                   "msg": res.msg, //解析提示文本
                   "count": res.data.total, //解析数据长度
                   "data": res.data.records//解析数据列表
               };
           }
            , cols: [[ //表头
                {type:'numbers',title:'序号'}
                , {field: 'names', title: '用户名称'}
                , {field: 'birthday', title: '出生日期'}
                , {field: 'zcnewtimes', title: '注册日期'}
                , {field: 'phone', title: '联系电话'}
                , {field: 'statics', title: '状态', templet: '#status'}
                , {fixeld: 'statics', fixed: 'right', title: '操作', toolbar: '#memberbutton', width: 80}
            ]]
        });
        $("#selectwhereMemberBtn").on('click', function () {
            var MemberName = $("#memberName").val();
            var MemberSex = $("#memberSex").val();
            var data = {
                name: MemberName,
                sex: MemberSex
            }
            tableIndex.reload({
                where:data
                ,page: {
                    curr: 1
                }
            });
        })
        //监听工具条
        table.on('tool(memberallTablemode)', function (obj) {
            var data = obj.data;
            if (obj.event === 'start') {
                $.post("/updatememberstatics", {"statics": 1, "id": data.id}, function (ex) {
                    if (ex == "ok") {
                        notify.success('成功')
                        location.reload();
                    } else {
                        notify.error('失败')
                    }
                })

            } else if (obj.event === 'del') {
                    $.post("/updatememberstatics", {"statics": 0, "id": data.id}, function (ex) {
                        if (ex == "ok") {
                            notify.success('成功')
                            location.reload();
                        } else {
                            notify.error('失败')
                        }
                    })
            }
        });

    })
</script>
</html>